<template>
  <!-- 预览图片和pdf 并下载 -->
  <div v-if="fileList.length > 0">
    <el-upload v-model:file-list="fileList" action="#" list-type="picture-card" :auto-upload="false" class="upload-img" >
          <template #file="{ file }">
              <span style="word-break: break-word; display: flex; align-items: center;padding: 10px;" v-if="file.name.endsWith('.pdf')">{{ file.name}}</span>
              <img v-else class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span  class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <el-icon><Download /></el-icon>
                </span>
              </span>
          </template>
        </el-upload>
  </div>
  <div v-else> 空 </div>
  <el-dialog v-model="previewPic" v-if="previewPic" :with-header="false">
    <div v-if="dialogImageUrl.endsWith('.pdf')">
      <pdfViewer :url="dialogImageUrl"></pdfViewer>
    </div>
    <img w-full v-else :src="dialogImageUrl" alt="Preview Image" style="width: 100%;" />
  </el-dialog>
</template>
<script setup lang="ts">
import pdfViewer from '@/components/pdf'
import { computed, ref } from 'vue';
const props = defineProps({
  detailFileList: {
    type: Array,
    default: () => { [] }
  }
})

const previewPic = ref(false);
const dialogImageUrl = ref('');
const handlePictureCardPreview = (file) => {
  previewPic.value = true;
  dialogImageUrl.value = file.url;
};
const handleDownload = (file) => {
  window.open(file.url,'_blank');
};

const fileList = computed(() => {
  if (props.detailFileList) {
    return JSON.parse(props.detailFileList) || []
  } else {
    return []
  }

})

</script>
<style scoped>
.img_css {
  width: 100px;
  height: 100px;
  margin: 2px 2px 2px 2px;
  box-shadow: 0 0 15px #999;
  border-radius: 5px;
}

.icon_css_hover {
  background-color: #000000;
  opacity: 0.5;
}

#icon_css {
  margin-top: -65px;
  height: 65px;

}

#icon_css_View {
  width: 50px;
  cursor: pointer;
  font-size: 20px;
}

#icon_css_Download {
  width: 50px;
  cursor: pointer;
  font-size: 20px;
}
</style>